<template>
    <!-- 中英文切换的图标 -->
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
      <!-- 鼠标移入 -->
        <div>
            <el-tooltip :content="$t('msg.navBar.lang')" :effect="effect">
                <svg-icon id="guide-lang" icon="language" />
            </el-tooltip>
        </div>
        <!-- 下拉菜单项 -->
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item :disabled="language === 'zh'" command="zh">
                    中文
                </el-dropdown-item>
                <el-dropdown-item :disabled="language === 'en'" command="en">
                    English
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { defineProps, computed } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";

// 接受数据
defineProps({
  //主题
  effect: {
    type: String,
    default: "dark",
    validator: function(value) {
      // 这个值必须匹配下列字符串中的一个
      return ["dark", "light"].indexOf(value) !== -1;
    }
  }
});

// 获取初始的国际语言
const store = useStore();
const language = computed(() => store.getters.language);

// 切换语言的方法
const i18n = useI18n();
const handleSetLanguage = lang => {
  // 切换 i18n 的 locale
  i18n.locale.value = lang;
  // 修改本地
  store.commit("app/setLanguage", lang);
  ElMessage.success(i18n.t("msg.toast.switchLangSuccess"));
};
</script>
